<script setup lang="ts">
import { ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";

import Result from "./components/Result.vue";
import Page from "@/components/common/Page.vue";
import ByImage from "@/components/ui/ByImage.vue";
import PageContent from "./components/PageContent.vue";
import SettledResult from "./components/SettledResult.vue";
import PageHeader from "@/components/common/PageHeader.vue";
import ContentTip from "../index/components/ContentTip.vue";

import useApp from "@/stores/app";
import useFetch from "@/hooks/useFetch";
import useDelay from "@/hooks/useDelay";
import checkLogin from "@/utils/checkLogin";
import useMerchant from "@/stores/merchant";

import ApiMerchant from "@/api/merchant";

import { TMerchantStaff, TMerchantInfo } from "@/global";

const { state, setRight } = useDelay();
const store = useMerchant();
const storeApp = useApp();

// 自动跳转至h5页面标识
let autoToSettledPage = true;

// 当前选中商户信息
let data = ref<TMerchantStaff>();

// 根据用户获取商户列表
const { run: runDetail } = useFetch<[TMerchantStaff]>(
  ApiMerchant.getMerchantListByUserId,
  {
    immediate: false,
    afterFetch: (res: any) => res?.list,
    onSuccess: (res) => {
      if (!res) {
        // 未获取到商户数据再去拉入驻信息
        runApplyDetail();
      } else if (res.length > 0) {
        // 优先获取角色为管理员的商户 ?? 直接拿第一条数据
        const item = res.find((item) => item.staff_type === 1) ?? res[0];

        data.value = item;
        store.merchantStaff = item;
        setRight();

        store.merchantStaff = item;
      }
    },
  }
);

// 获取入驻详情
const { data: applyDetail, run: runApplyDetail } = useFetch<
  TMerchantInfo & { id: number }
>(
  ApiMerchant.getAppMerchantApplyDetail,
  {
    immediate: false,
    afterFetch: (res: any) => res?.merchant_apply_detail as TMerchantInfo,
    onSuccess(res) {
      if (res.audit_status != 1) {
        autoToSettledPage = false;
        handleSettled();
      }
    },
    onError() {
      setTimeout(() => {
        console.log("runApplyDetailOnError");
        if (autoToSettledPage && !store.merchantStaff) {
          autoToSettledPage = false;
          handleSettled();
        }
      }, 500);
    },
  },
  { hiddenToast: true }
);

const handleSettled = () => checkLogin("/packageMerchant/pages/settled/index");

useDidShow(async () => {
  if (storeApp.isLogined && !data.value) {
    if (store.merchantStaff) {
      data.value = store.merchantStaff;
    } else {
      runDetail();
    }
  }
});
</script>

<template>
  <Page mode="fixed" :height="'440rpx'">
    <template #header>
      <PageHeader :show-back="false" class="bg-primary">
        <view v-if="data" class="flex items-center px-3">
          <ByImage
            circle
            :size="72"
            :url="data.merchant_logo"
            class="shadow-lg"
          />
          <view class="ml-2 text-light">{{ data.merchant_title }}</view>
        </view>
      </PageHeader>
    </template>

    <PageContent v-if="data" :source="data" :applyDetail="applyDetail" />

    <template v-else-if="applyDetail">
      <ContentTip
        btn-text="查看进度"
        @btn-tap="
          Taro.navigateTo({ url: '/packageMerchant/pages/settled/result' })
        "
      >
        <SettledResult :source="applyDetail" hidden-btn simple />
      </ContentTip>
    </template>

    <template v-else-if="state">
      <ContentTip btn-text="入驻商家" @btn-tap="handleSettled">
        <Result image="/static/svg/settled-no.svg" title="您尚未入驻成为商家" />
      </ContentTip>
    </template>
  </Page>
</template>
